<!-- 热词配置 hotword -->
<template>
  <div class="content">
    <div class="content-container">
      <div class="content-btn">
        <Cbutton @click="handleAdd">添加热词</Cbutton>
        <Cbutton @click="getList" :btnloading="tableLoading" type="" icon="el-icon-refresh">刷新</Cbutton>
      </div>
      <el-table :data="tableList" v-loading="tableLoading" ref="tableData" border fit>
        <el-table-column label="序号" type="index" align="center" width="70"></el-table-column>
        <el-table-column prop="keywords" label="热词名称" align="center" width="300">
          <template slot-scope="scope">
            <span class="click-ele" @click="handleNameChange(scope.row)">{{scope.row.keywords || ''}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.statusSwitch" @change="handleStatus(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.createTime | glbTimeFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.updateTime | glbTimeFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="medium" @click="handleAddProduct(scope.row)">添加商品</el-button>
            <el-button type="text" size="medium" @click="handleUpdate(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <SelectProduct v-if="selectProShow" :modalShow.sync="selectProShow" @selectChange="getAddGoodsList" :isForbidden="false"></SelectProduct>

    <HotwordAdd v-if="addShow" :modalShow.sync="addShow" @oprRusult="formOprResult"></HotwordAdd>
    <HotwordEdit v-if="editShow" :modalShow.sync="editShow" :cid="currHotWordId"></HotwordEdit>

  </div>
</template>

<script>
import { GetHotWordList, UpdateHotWord, HotWordAppendProduct } from '@/api/onlineMan'
import HotwordEdit from './edit.vue'
import HotwordAdd from './add.vue'
import SelectProduct from '@/components/SelectProduct/selectPro'
export default {
  name: 'hotword',
  components: { HotwordEdit, HotwordAdd, SelectProduct },
  data () {
    return {
      query: {
        title: '',
        pageNum: 1,
        pageSize: 10
      },
      totalCount: 0,
      tableList: [],
      tableSelectList: [],
      tableLoading: false,
      addShow: false,
      editShow: false,
      selectProShow: false,
      currHotWordId: '',
      selectProducts: [],
      productList: []
    }
  },
  props: {},
  watch: {},
  computed: {},
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      this.tableLoading = true
      const pamams = JSON.parse(JSON.stringify(this.query))
      GetHotWordList(pamams).then(res => {
        this.tableLoading = false
        res.data.forEach(e => {
          e.originkeywords = e.keywords || ''
          e.statusSwitch = e.status === 1
          e.originstatusSwitch = e.status === 1
        })
        this.tableList = res.data
        this.totalCount = res.data.total || 0
      }).catch(e => {
        this.tableLoading = false
      })
    },
    formOprResult (val) {
      this.getList()
    },
    // 名字更改处理
    handleNameChange (row) {
      let inputPatternReg = /^[\u4e00-\u9fffa-zA-Z0-9]{1,50}$/
      let inputErrorMessage = '热词名称格式不正确(最多50字)'
      this.$prompt('', `设置热词`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: row.keywords || '',
        inputPattern: inputPatternReg,
        inputType: 'textarea',
        inputErrorMessage: inputErrorMessage
      }).then(({ value }) => {
        const params = {
          id: row.id,
          keywords: value
        }
        this.updateRequest(params, row, 'keywords', true)
      }).catch(() => { })
    },
    // 状态处理
    handleStatus (row) {
      const params = {
        id: row.id,
        status: row.statusSwitch ? 1 : '0'
      }
      this.updateRequest(params, row, 'statusSwitch')
    },
    handleAdd () {
      this.addShow = true
    },
    handleAddProduct (row) {
      this.selectProShow = true
      this.currHotWordId = row.id
    },
    getAddGoodsList (val) {
      const indexIds = this.selectProducts.map(e => e.id)
      val.forEach(e => {
        if (indexIds.indexOf(e.productId) <= -1) {
          const info = {
            id: e.productId,
            name: e.name
          }
          this.selectProducts.push(info)
          this.productList.push({ id: info.id })
        }
      })
      let params = {
        id: this.currHotWordId,
        productList: this.productList
      }
      HotWordAppendProduct(params).then(res => {
        this.getList()
      }).catch(e => { })
    },

    handleUpdate (row) {
      this.currHotWordId = row.id
      this.editShow = true
    },
    updateRequest (params, row, type, updateList) {
      UpdateHotWord(params).then(res => {
        if (updateList) {
          this.getList()
        }
      }).catch(e => {
        if (row) {
          row[type] = row['origin' + type]
        }
      })
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
